<template>
	<view class="info">
		<view class="info_view">
			<view class="info_title">
				单号信息
			</view>
			<view class="info_content">
				<view class="info_content_item">
					<view class="info_item_left">
						快递单号：
					</view>
					<view class="info_item_right">
						<input class="input-border" v-model="result.orderNo" type="text" />
					</view>
				</view>
				<view class="info_content_item">
					<view class="info_item_left">
						寄件人：
					</view>
					<view class="info_item_right">
						<view class="info_item_row">
							<view class="info_item_name">
								<input class="input-border" v-model="result.shipperName" type="text" />
							</view>
							<view class="info_item_phone">
								<input class="input-border" v-model="result.shipperMobile" type="text" />
							</view>
						</view>
						<textarea class="textarea-border" v-model="result.shipperFullAddr"></textarea>
					</view>
				</view>
				<view class="info_content_item">
					<view class="info_item_left">
						收件人：
					</view>
					<view class="info_item_right">
						<view class="info_item_row">
							<view class="info_item_name">
								<input class="input-border" v-model="result.receivingName" type="text" />
							</view>
							<view class="info_item_phone">
								<input class="input-border" v-model="result.receivingMobile" type="text" />
							</view>
						</view>
						<textarea class="textarea-border" v-model="result.receivingFullAddr"></textarea>
					</view>
				</view>
			</view>
			<button formType="submit" class="submit_btn" @click="submit">提交</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				result: {
					"orderNo": "",
					"companyName": null,
					"companyCode": null,
					"shipperAddress": "",
					"shipperMobile": "",
					"shipperName": null,
					"shipperProvince": "",
					"shipperCity": "",
					"shipperCounty": "",
					"shipperText": "",
					"receivingAddr": "",
					"receivingMobile": "",
					"receivingName": "",
					"receivingProvince": "",
					"receivingCity": "",
					"receivingCounty": "",
					"receivingText": "",
					"status": 0,
					"createTime": "",
					"updateTime": ""
				},
			}
		},
		onLoad(e) {
		    	console.log()
				if(e.resData) {
					let data = JSON.parse(decodeURIComponent(e.resData))
					this.result = {...this.result, ...data}
				}
		},
		mounted() {

		},
		methods: {
			submit() {
				// 发送请求到后端
				uni.request({
					url: 'http://1.12.222.66/api/ocr/save',
					method: 'POST',
					data: this.result,
					success: (res) => {
						console.log("resres", res)
						let data = res.data
						console.log("datadatadata", data)
						if(data && data.code == '0') {
							uni.showToast({
								title: '保存成功,可继续拍照识别！',
								icon: 'success',
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateBack()
							},2000)
						} else {
							uni.showToast({
							    title: data.msg || '保存失败',
							    icon: 'error',
							    duration: 2000
							});
						}
					},
					fail: (err) => {
					  uni.showToast({
					      title: data.msg || '保存失败',
					      icon: 'error',
					      duration: 2000
					  });
					}
				});
			},
		},
	}
</script>
<style scoped>
	.info {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* 确保容器宽度为百分比 */
		/* 设置一个高度 */
		background-image: url("../../static/infobg.png");
		/* 背景图片路径 */
		background-size: cover;
		/* 背景图片覆盖整个容器 */
		background-position: center;
		/* 背景图片居中 */
		overflow-x: hidden;
		overflow-y: auto;
	}
	.info_view {
		margin-top: 170px;
		overflow: hidden;
	}

	.info_title {
		font-size: 20px;
		text-align: center;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.info_content {
		background-color: #ffffff;
		padding: 10px;
		margin: 10px;
		border-radius: 10px;
		overflow: hidden;
	}

	.info_content_item {
		display: flex;
		width: 100%;
		margin-bottom: 10px;
	}

	.info_item_left {
		width: 90px;
		color: #818181;
	}

	.info_item_right {
		flex: 1;
	}

	.info_item_name {
		margin-bottom: 10px;
	}

	.info_item_phone {
		margin-bottom: 10px;
	}

	.input-border {
		border: 1px solid #ccc;
		/* 边框颜色可以根据需要自定义 */
		border-radius: 4px;
		/* 圆角 */
		padding: 4px 8px;
		/* 内边距 */
		width: 100%;
		/* 宽度 */
		height: 35px;
		line-height: 35px;
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.textarea-border {
		border: 1px solid #ccc;
		/* 边框颜色可以根据需要自定义 */
		border-radius: 4px;
		/* 圆角 */
		padding: 4px 8px;
		/* 内边距 */
		width: 100%;
		/* 宽度 */
		box-sizing: border-box;
		/* 防止宽度计算错误 */
	}

	.submit_btn {
		width: 200px;
		display: block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		color: #fff;
		background-color: #409eff;
		border-color: #409eff;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 20px;
		margin: 20px auto;
	}
</style>